Overlays are one of the favorite effects in eye candy application designs. In this tutorial I have made a simple overlay effect for a WPF application. The technique is very simple and I have explained it in this ‘start from scratch’ tutorial. See the demo video:

I have used Visual Studio 2008 ( C#) and Expression Blend 2 in this tutorial, here is how to do it:

Start Expression Studio 2 and go to File>New Project. In “Select a project type” select WPF Application (.exe). Name it as MyOverlayApp. Click OK

Select Window and click on Properties. In Common Properties, change the value of Title to “My Overlay Application” and press enter.

Create the following UI (Click on image to enlarge). Set button’s name property as “bt_overlay”

Now creating the overlay:

Draw a big rectangle to cover the whole window. In Properties: make rectangle’s color black, set Opacity to about ‘82%’ and set name to “rec_overlay”.

Now in Properties of “rec_overlay”, set Visibility to “Hidden” in Appearance. The rectangle will disappear

Now select “bt_overlay” and In Properties, click on Events button and then double click “Click” text field.

Same project open in Visual Studio 2008

Copy and paste the following code in bt_overlay_Click function

private void bt_overlay_Click(object sender, RoutedEventArgs e)
        {
            rec_overlay.Visibility = Visibility.Visible;

            MessageBoxResult msgbox = MessageBox.Show("Overlay active, press OK to close", "Overlay");

            switch (msgbox)
            {
                case MessageBoxResult.OK:

                    rec_overlay.Visibility = Visibility.Hidden;
                    break;
            }

        }

Press F5 to run the application: See the video in the beginning of this tutorial for demo of the output.

Download the Solution File: MyOverlayApp.zip